import React, { Component } from 'react';
import { Modal, Table, Row, Col, Icon, Button } from 'antd';
import { Link } from 'dva/router';
import RangePicker from '../../plugin/rangePicker';
import 'moment/locale/zh-cn';
import moment from 'moment';
import Styles from './adData.less';

moment.locale('zh-cn');

class PacketModal extends Component {
  constructor (props) {
    super(props);
    this.state = {
      visible: false,
      crGrpIds: ''
    }
  }
  // 素材弹窗
  materialModal = () => {
    this.setState({
      visible: true
    });
  }
  //
  fetchMaterialList = (crGrpIds, beginTime, endTime) => {
    const { onFetchMaterialList } = this.props;
    this.setState({
      crGrpIds: crGrpIds,
      visible: true
    })
    onFetchMaterialList(crGrpIds, beginTime, endTime)
  }

  // 切换时间
  handleRangePicker = (beginTime, endTime) => {
    const { onComplete, planId } = this.props;
    onComplete(planId, beginTime, endTime);
  }

  // 素材列表时间切换查询
  handleMaterialRangePicker = (beginTime, endTime) => {
    const { onFetchMaterialList } = this.props;
    onFetchMaterialList(
      this.state.crGrpIds,
      moment(beginTime).format('YYYY-MM-DD'),
      moment(endTime).format('YYYY-MM-DD')
    );
  }

  // 创意列表弹窗关闭
  onClose = () => {
    const { onClose } = this.props;
    onClose();
  }

  //
  onMaterialClose = () => {
    this.setState({
      visible: false
    })
  }

  render () {
    const columns = [{
		  title: '创意包ID',
		  dataIndex: 'id',
		  key: 'id'
		},{
		  title: '创意包名称',
		  dataIndex: 'title',
		  key: 'title',
      render: (text, record) => {
		    return (
		      <a onClick={this.fetchMaterialList.bind(this, record.id, this.props.beginTime, this.props.endTime)} className={Styles.packetTitle}>{text}<span className={Styles.plusIcon}><Icon type="plus-circle-o" /></span></a>
		    )
		  }
		},{
		  title: '曝光量',
		  dataIndex: 'exposureCount',
		  key: 'exposureCount',
		}, {
		  title: '点击量',
		  dataIndex: 'clickCount',
		  key: 'clickCount'
		},{
		  title: '点击率',
		  dataIndex: 'clickRate',
		  key: 'clickRate',
		}, {
		  title: '点击均价（元）',
		  dataIndex: 'avgPrice',
		  key: 'avgPrice',
		}, {
		  title: '总消耗（元）',
		  dataIndex: 'consumeTotal',
		  key: 'consumeTotal',
		}];
    const columnsTime = [
      {
  		  title: '序号',
  		  dataIndex: 'numberId',
  		  key: 'numberId'
  		},
      {
        title: '时间',
        dataIndex: 'time',
        key: 'time'
      },
      {
        title: '爆光量',
        dataIndex: 'puGuangNum',
        key: 'puGuangNum'
      },
      {
        title: '点击量',
        dataIndex: 'clickNum',
        key: 'clickNum'
      },
      {
        title: '点击率',
        dataIndex: 'clickPac',
        key: 'clickPac'
      },
      {
        title: '点击均价',
        dataIndex: 'clickPrice',
        key: 'clickPrice'
      },
      {
        title: '总消耗（元)',
        dataIndex: 'allPrice',
        key: 'allPrice'
      }
    ]
    const materialColumns = [{
      title: '创意素材ID',
      dataIndex: 'id',
      key: 'id'
    },{
      title: '素材名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        return (
          <a href={record.url} target="_blank" className={Styles.materialLink}><img src={record.url} /><span>{text}</span></a>
        )
      }
    },{
      title: '尺寸',
      dataIndex: 'size',
      key: 'size',
      render: (text, record) => {
        return (
          <span>{record.width}*{record.height}</span>
        )
      }
    },{
      title: '曝光量',
      dataIndex: 'exposureCount',
      key: 'exposureCount',
    }, {
      title: '点击量',
      dataIndex: 'clickCount',
      key: 'clickCount'
    },{
      title: '点击率',
      dataIndex: 'clickRate',
      key: 'clickRate',
    }, {
      title: '点击均价（元）',
      dataIndex: 'avgPrice',
      key: 'avgPrice',
    }, {
      title: '总消耗（元）',
      dataIndex: 'consumeTotal',
      key: 'consumeTotal',
    }];
    const stkey = 'packetList23',
          summaryObj = this.props.packetSummary[0];
    let packetst = [<Col key={stkey} span={11}>汇总</Col>];
    for(let k in summaryObj){
      packetst.push(<Col key={k} span={2} className={Styles.packetCol}>{summaryObj[k]}</Col>);
    }
    const stThree = packetst[3];
    packetst.splice(3,1);
    packetst.push(stThree);
    return (
      <div>
        <Modal
          title="创意包"
          width={1000}
          key={this.props.planId || 'packetList'}
          footer={null}
          onCancel={this.onClose}
          visible={this.props.visible}
        >
        <div className={Styles.rangePicker}>
          <RangePicker onComplete={this.handleRangePicker} />
        </div>
        <Table
          rowKey={record => record.id}
          dataSource={this.props.packetList}
          columns={columns}
          pagination={false}
          footer= {() => packetst}
        />
        </Modal>
        <Modal
          width={1000}
          title="创意素材"
          key={this.state.crGrpIds || 'materialList'}
          footer={null}
          visible={this.state.visible}
          onCancel={this.onMaterialClose}
        >
          <div className={Styles.rangePicker}>
            <RangePicker onComplete={this.handleMaterialRangePicker} />
          </div>
          <Table
            rowKey={record => record.id}
            dataSource={this.props.materialList}
            columns={materialColumns}
            pagination={false}
          />
        </Modal>
      </div>
    )
  }
}

export default PacketModal;
